<template>
	<view class="page-container">
		<!-- 预警横幅 -->
		<view v-if="warningTokens.length > 0" class="tech-card warning-section">
			<view class="warning-content">
				<text class="warning-icon">⚠️</text>
				<text class="warning-text">{{ warningMessage }}</text>
			</view>
		</view>

		<!-- 顶部操作栏 -->
		<view class="tech-card filter-section">
			<view class="card-title">
				<view class="title-icon">🔐</view>
				<text>Token 配置管理</text>
			</view>

			<view class="filter-content">
				<el-button @click="refreshList()" class="tech-button primary-button">
					<text>🔄 刷新列表</text>
				</el-button>
			</view>
		</view>

		<!-- 百度网盘 Token 获取链接 -->
		<view class="tech-card reference-section">
			<view class="card-title">
				<view class="title-icon">🔗</view>
				<text>百度网盘 Token 获取链接</text>
			</view>

			<view class="reference-content">
				<view class="link-item">
					<view class="link-label">1. 授权链接（获取 code）：</view>
					<view class="link-box">
						<text class="link-text">{{ baiduAuthUrl }}</text>
						<el-button type="text" class="copy-button" @click="copyLink(baiduAuthUrl)">
							📋 复制
						</el-button>
					</view>
				</view>

				<view class="link-item">
					<view class="link-label">2. Token 获取链接（用 code 换 token）：</view>
					<view class="link-box">
						<text class="link-text">{{ baiduTokenUrl }}</text>
						<el-button type="text" class="copy-button" @click="copyLink(baiduTokenUrl)">
							📋 复制
						</el-button>
					</view>
				</view>

				<view class="link-tips">
					<text class="tip-icon">💡</text>
					<text class="tip-text">步骤：1️⃣ 访问授权链接获取 code → 2️⃣ 将 code 替换到 Token 获取链接中 → 3️⃣ 访问完整链接获取 token</text>
				</view>
			</view>
		</view>

		<!-- Token列表 -->
		<view class="tech-card table-section">
			<view class="card-title">
				<view class="title-icon">📋</view>
				<text>Token 列表</text>
				<text class="file-count" v-if="tokenList.length > 0">共 {{ tokenList.length }} 条配置</text>
			</view>

			<el-table :data="tokenList" class="tech-table" size="small"
				:header-cell-style="{ background: '#1a1f3a', color: '#00f0ff', fontWeight: 'bold' }"
				height="calc(100vh - 480px)">
				<el-table-column align="center" type="index" width="80" label="序号" />

				<el-table-column align="center" label="配置名称" width="180">
					<template slot-scope="scope">
						<el-tag>{{ scope.row.configName }}</el-tag>
					</template>
				</el-table-column>

				<el-table-column align="center" label="配置值" min-width="200">
					<template slot-scope="scope">
						<!-- 开关类型配置 -->
						<view v-if="isSwitchConfig(scope.row.configKey)" style="display: flex; align-items: center; justify-content: center; gap: 12px;">
							<text style="color: #b8c5d6; font-size: 13px;">{{ getSwitchText(scope.row.configKey, scope.row.configValue) }}</text>
							<el-switch
								:value="scope.row.configValue === '1'"
								@change="toggleSwitch(scope.row)"
								active-color="#00f0ff"
								inactive-color="#7f8ea3">
							</el-switch>
						</view>
						<!-- Token类型配置 -->
						<view v-else>
							<view v-if="scope.row.showToken">
								{{ scope.row.configValue }}
							</view>
							<view v-else style="display: flex; align-items: center; justify-content: center;">
								<text style="margin-right: 10px;">*******************</text>
								<el-button type="text" size="mini" @click="toggleToken(scope.$index)">
									显示
								</el-button>
							</view>
						</view>
					</template>
				</el-table-column>

				<el-table-column align="center" label="有效期状态" width="150">
					<template slot-scope="scope">
						<!-- 开关类型配置显示永久有效 -->
						<el-tag v-if="isSwitchConfig(scope.row.configKey)" type="info">永久有效</el-tag>
						<!-- Token类型配置显示有效期状态 -->
						<template v-else>
							<el-tag v-if="scope.row.status === 'expired'" type="danger">已过期</el-tag>
							<el-tag v-else-if="scope.row.status === 'warning'" type="warning">即将过期</el-tag>
							<el-tag v-else type="success">正常</el-tag>
						</template>
					</template>
				</el-table-column>

				<el-table-column align="center" label="剩余天数" width="120">
					<template slot-scope="scope">
						<!-- 开关类型配置显示横线 -->
						<text v-if="isSwitchConfig(scope.row.configKey)" style="color: #7f8ea3;">-</text>
						<!-- Token类型配置显示剩余天数 -->
						<template v-else>
							<text v-if="scope.row.remainingDays < 0" style="color: #f56c6c;">
								已过期 {{ Math.abs(scope.row.remainingDays) }} 天
							</text>
							<text v-else-if="scope.row.remainingDays <= 7" style="color: #e6a23c;">
								剩余 {{ scope.row.remainingDays }} 天
							</text>
							<text v-else style="color: #67c23a;">
								剩余 {{ scope.row.remainingDays }} 天
							</text>
						</template>
					</template>
				</el-table-column>

				<el-table-column align="center" label="过期时间" width="180">
					<template slot-scope="scope">
						<text v-if="isSwitchConfig(scope.row.configKey)" style="color: #7f8ea3;">-</text>
						<text v-else>{{ formatDate(scope.row.expiresTime) }}</text>
					</template>
				</el-table-column>

				<el-table-column align="center" label="操作" width="120" fixed="right">
					<template slot-scope="scope">
						<!-- 开关类型配置不显示编辑按钮 -->
						<text v-if="isSwitchConfig(scope.row.configKey)" style="color: #7f8ea3;">-</text>
						<!-- Token类型配置显示编辑按钮 -->
						<el-button v-else type="text" class="action-button" @click="editToken(scope.row)">
							编辑
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</view>

		<!-- 编辑Dialog -->
		<el-dialog title="编辑 Token 配置" :visible.sync="showEditDialog" width="50%" class="tech-dialog">
			<el-form label-width="120px" :model="editForm" ref="editForm" size="small">
				<el-form-item label="配置名称">
					<el-input v-model="editForm.configName" disabled></el-input>
				</el-form-item>

				<el-form-item label="Token值" required>
					<el-input
						v-model="editForm.configValue"
						type="textarea"
						:rows="4"
						placeholder="请输入新的Token值">
					</el-input>
				</el-form-item>

				<el-form-item label="有效期至" required>
					<el-date-picker
						v-model="editForm.expiresDate"
						type="datetime"
						placeholder="选择日期时间"
						value-format="timestamp"
						:picker-options="pickerOptions">
					</el-date-picker>
					<view style="margin-top: 10px;">
						<el-button size="mini" @click="setExpiresDays(30)">30天后</el-button>
						<el-button size="mini" @click="setExpiresDays(60)">60天后</el-button>
						<el-button size="mini" @click="setExpiresDays(90)">90天后</el-button>
					</view>
				</el-form-item>

				<el-form-item label="备注">
					<el-input
						v-model="editForm.remark"
						type="textarea"
						:rows="2"
						placeholder="备注信息（可选）">
					</el-input>
				</el-form-item>
			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button @click="showEditDialog = false" size="small">取消</el-button>
				<el-button type="primary" @click="saveToken" size="small">保存</el-button>
			</span>
		</el-dialog>
	</view>
</template>

<script>
	let that;
	export default {
		data() {
			return {
				tokenList: [],
				showEditDialog: false,
				editForm: {
					configKey: '',
					configName: '',
					configValue: '',
					expiresDate: null,
					remark: ''
				},
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() < Date.now() - 8.64e7; // 不能选择今天之前的日期
					}
				},
				// 百度网盘相关链接
				baiduAuthUrl: 'http://openapi.baidu.com/oauth/2.0/authorize?response_type=code&client_id=f2mcPlYuYRYEVkVVfsKigazzwvhlzPDb&redirect_uri=oob&scope=basic,netdisk&device_id=28064442',
				baiduTokenUrl: 'https://openapi.baidu.com/oauth/2.0/token?grant_type=authorization_code&code=2ee34ae5bdb89e403704a636605d5e4f&client_id=f2mcPlYuYRYEVkVVfsKigazzwvhlzPDb&client_secret=diaHi3iSkTUgYwPUVlK34suzGn2cSH4T&redirect_uri=oob'
			}
		},

		computed: {
			// 需要预警的token列表
			warningTokens() {
				return this.tokenList.filter(item =>
					item.status === 'expired' || item.status === 'warning'
				);
			},

			// 预警消息
			warningMessage() {
				if (this.warningTokens.length === 0) return '';

				const expiredTokens = this.warningTokens.filter(item => item.status === 'expired');
				const warningTokens = this.warningTokens.filter(item => item.status === 'warning');

				let msg = '⚠️ ';
				if (expiredTokens.length > 0) {
					msg += `${expiredTokens.map(t => t.configName).join('、')} 已过期！`;
				}
				if (warningTokens.length > 0) {
					if (expiredTokens.length > 0) msg += ' ';
					msg += `${warningTokens.map(t => t.configName).join('、')} 即将过期（7天内）`;
				}
				msg += '，请及时更新。';

				return msg;
			}
		},

		onLoad() {
			that = this;
			that.getTokenList();
		},

		methods: {
			// 判断是否是开关类型配置
			isSwitchConfig(configKey) {
				return configKey === 'course_price_mode' || configKey === 'ios_can_in';
			},

			// 获取开关显示文本
			getSwitchText(configKey, configValue) {
				if (configKey === 'course_price_mode') {
					return configValue === '1' ? '显示原价' : '全部免费';
				} else if (configKey === 'ios_can_in') {
					return configValue === '1' ? 'iOS功能可用' : 'iOS功能不可用';
				}
				return '';
			},

			// 获取开关切换确认文本
			getSwitchConfirmText(configKey, newValue) {
				if (configKey === 'course_price_mode') {
					return newValue === '1' ? '显示原价' : '全部免费';
				} else if (configKey === 'ios_can_in') {
					return newValue === '1' ? 'iOS功能可用' : 'iOS功能不可用';
				}
				return '';
			},

			// 获取Token列表
			getTokenList() {
				that.$http.Post("admin/systemConfig/getTokenList", {}).then(res => {
					if (res.code === 1) {
						// 为每个token添加显示状态
						that.tokenList = res.data.map(item => ({
							...item,
							showToken: false
						}));
					}
				}).catch(err => {
					that.common.showToast("获取Token列表失败", "error");
				});
			},

			// 刷新列表
			refreshList() {
				that.getTokenList();
				that.common.showToast("刷新成功");
			},

			// 复制链接
			copyLink(url) {
				// 创建临时输入框
				const input = document.createElement('input');
				input.value = url;
				document.body.appendChild(input);
				input.select();

				try {
					// 执行复制
					document.execCommand('copy');
					that.common.showToast("复制成功");
				} catch (err) {
					that.common.showToast("复制失败，请手动复制", "error");
				}

				// 移除临时输入框
				document.body.removeChild(input);
			},

			// 切换Token显示/隐藏
			toggleToken(index) {
				that.tokenList[index].showToken = !that.tokenList[index].showToken;
				// 强制更新
				that.$forceUpdate();
			},

			// 切换开关配置（通用方法）
			toggleSwitch(row) {
				const newValue = row.configValue === '1' ? '0' : '1';
				const modeName = this.getSwitchConfirmText(row.configKey, newValue);

				// 确认对话框
				this.$confirm(`确定要切换为"${modeName}"吗？`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					// 调用API更新配置
					const params = {
						configKey: row.configKey,
						configValue: newValue,
						expiresTime: row.expiresTime // 保持原有过期时间
					};

					that.$http.Post("admin/systemConfig/updateToken", params).then(res => {
						if (res.code === 1) {
							that.common.showToast(`已切换为"${modeName}"`);
							that.getTokenList(); // 刷新列表
						} else {
							that.common.showToast(res.msg || "切换失败", "error");
						}
					}).catch(err => {
						that.common.showToast("切换失败", "error");
					});
				}).catch(() => {
					// 用户取消操作
				});
			},

			// 编辑Token
			editToken(row) {
				that.editForm = {
					configKey: row.configKey,
					configName: row.configName,
					configValue: row.configValue,
					expiresDate: parseInt(row.expiresTime),
					remark: row.remark || ''
				};
				that.showEditDialog = true;
			},

			// 设置过期天数
			setExpiresDays(days) {
				const now = Date.now();
				that.editForm.expiresDate = now + (days * 24 * 60 * 60 * 1000);
			},

			// 保存Token
			saveToken() {
				if (!that.editForm.configValue) {
					that.common.showToast("请输入Token值", "error");
					return;
				}

				if (!that.editForm.expiresDate) {
					that.common.showToast("请选择过期时间", "error");
					return;
				}

				const params = {
					configKey: that.editForm.configKey,
					configValue: that.editForm.configValue,
					expiresTime: that.editForm.expiresDate
				};

				that.$http.Post("admin/systemConfig/updateToken", params).then(res => {
					if (res.code === 1) {
						that.common.showToast("保存成功");
						that.showEditDialog = false;
						that.getTokenList();
					} else {
						that.common.showToast(res.msg || "保存失败", "error");
					}
				}).catch(err => {
					that.common.showToast("保存失败", "error");
				});
			},

			// 格式化日期
			formatDate(timestamp) {
				if (!timestamp) return '-';
				const date = new Date(parseInt(timestamp));
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hour = String(date.getHours()).padStart(2, '0');
				const minute = String(date.getMinutes()).padStart(2, '0');
				return `${year}-${month}-${day} ${hour}:${minute}`;
			}
		}
	}
</script>

<style scoped>
/* ==================== 全局容器 ==================== */
.page-container {
	min-height: 100vh;
	padding: 16px;
	background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #0f1729 100%);
	font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ==================== 科技卡片 ==================== */
.tech-card {
	background: rgba(26, 31, 58, 0.6);
	backdrop-filter: blur(10px);
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 16px;
	border: 1px solid rgba(0, 240, 255, 0.2);
	box-shadow:
		0 8px 32px rgba(0, 240, 255, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.tech-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, transparent, #00f0ff, transparent);
	animation: scan 3s infinite;
}

@keyframes scan {
	0%, 100% {
		left: -100%;
	}
	50% {
		left: 100%;
	}
}

.tech-card:hover {
	border-color: rgba(0, 240, 255, 0.4);
}

/* ==================== 卡片标题 ==================== */
.card-title {
	display: flex;
	align-items: center;
	font-size: 16px;
	font-weight: 600;
	color: #00f0ff;
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(0, 240, 255, 0.2);
	text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.title-icon {
	margin-right: 6px;
	font-size: 18px;
	filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.6));
}

.file-count {
	margin-left: auto;
	font-size: 12px;
	color: #7f8ea3;
	font-weight: normal;
	background: rgba(0, 240, 255, 0.1);
	padding: 2px 10px;
	border-radius: 10px;
	border: 1px solid rgba(0, 240, 255, 0.2);
}

/* ==================== 预警区域 ==================== */
.warning-section {
	background: rgba(255, 193, 7, 0.1);
	border: 1px solid rgba(255, 193, 7, 0.3);
	box-shadow: 0 8px 32px rgba(255, 193, 7, 0.2);
}

.warning-content {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 12px;
}

.warning-icon {
	font-size: 24px;
	filter: drop-shadow(0 0 8px rgba(255, 193, 7, 0.6));
}

.warning-text {
	flex: 1;
	color: #ffc107;
	font-size: 14px;
	font-weight: 600;
	text-shadow: 0 0 10px rgba(255, 193, 7, 0.3);
}

/* ==================== 筛选区域 ==================== */
.filter-section {
	margin-bottom: 16px;
}

.filter-content {
	display: flex;
	gap: 16px;
	align-items: center;
}

/* ==================== 链接参考区域 ==================== */
.reference-section {
	margin-bottom: 16px;
}

.reference-content {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.link-item {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.link-label {
	color: #b8c5d6;
	font-size: 13px;
	font-weight: 600;
}

.link-box {
	display: flex;
	align-items: center;
	gap: 12px;
	background: rgba(10, 14, 39, 0.6);
	border: 1px solid rgba(0, 240, 255, 0.3);
	border-radius: 6px;
	padding: 10px 12px;
	transition: all 0.3s ease;
}

.link-box:hover {
	border-color: rgba(0, 240, 255, 0.5);
	background: rgba(10, 14, 39, 0.8);
}

.link-text {
	flex: 1;
	color: #00f0ff;
	font-size: 12px;
	word-break: break-all;
	line-height: 1.6;
	font-family: 'Monaco', 'Menlo', monospace;
}

.copy-button {
	color: #00f0ff !important;
	font-weight: 600 !important;
	padding: 4px 12px !important;
	background: rgba(0, 240, 255, 0.1) !important;
	border-radius: 4px !important;
	transition: all 0.3s ease !important;
	flex-shrink: 0;
	font-size: 12px !important;
}

.copy-button:hover {
	background: rgba(0, 240, 255, 0.2) !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 240, 255, 0.3);
}

.link-tips {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 10px 12px;
	background: rgba(0, 240, 255, 0.05);
	border-left: 3px solid rgba(0, 240, 255, 0.5);
	border-radius: 4px;
	margin-top: 4px;
}

.tip-icon {
	font-size: 16px;
	flex-shrink: 0;
	margin-top: 2px;
}

.tip-text {
	color: #7f8ea3;
	font-size: 12px;
	line-height: 1.6;
}

/* ==================== 科技按钮 ==================== */
.tech-button {
	padding: 8px 20px !important;
	border-radius: 6px !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	letter-spacing: 0.3px;
	transition: all 0.3s ease !important;
	border: none !important;
	position: relative;
	overflow: hidden;
	height: 36px;
}

.tech-button::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	transform: translate(-50%, -50%);
	transition: width 0.6s, height 0.6s;
}

.primary-button {
	background: linear-gradient(135deg, #00f0ff 0%, #0099cc 100%) !important;
	color: #0a0e27 !important;
	box-shadow: 0 4px 15px rgba(0, 240, 255, 0.3);
}

.primary-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 240, 255, 0.5);
}

/* ==================== 表格区域 ==================== */
.table-section {
	height: calc(100vh - 390px);
	display: flex;
	flex-direction: column;
}

/* ==================== 表格样式 ==================== */
.tech-table {
	width: 100%;
	flex: 1;
}

.tech-table >>> .el-table {
	background: transparent !important;
	color: #e0e6ed;
}

.tech-table >>> .el-table::before {
	background: transparent !important;
}

.tech-table >>> .el-table th,
.tech-table >>> .el-table tr {
	background: transparent !important;
}

.tech-table >>> .el-table td,
.tech-table >>> .el-table th.is-leaf {
	border-bottom: 1px solid rgba(0, 240, 255, 0.1) !important;
}

.tech-table >>> .el-table td {
	color: #b8c5d6 !important;
	transition: all 0.3s ease;
	position: relative;
	z-index: 1;
}

.tech-table >>> .el-table__body tr {
	background: rgba(10, 14, 39, 0.3) !important;
	transition: all 0.3s ease;
	border-left: 3px solid transparent;
}

.tech-table >>> .el-table__body tr:hover {
	background: linear-gradient(90deg,
		rgba(0, 240, 255, 0.2) 0%,
		rgba(0, 240, 255, 0.15) 50%,
		rgba(0, 240, 255, 0.05) 100%) !important;
	border-left-color: #00f0ff;
}

.tech-table >>> .el-table__body tr:hover td {
	color: #e0e6ed !important;
}

.tech-table >>> .el-table__body-wrapper {
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 240, 255, 0.3) rgba(10, 14, 39, 0.5);
}

.tech-table >>> .el-table__body-wrapper::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.tech-table >>> .el-table__body-wrapper::-webkit-scrollbar-track {
	background: rgba(10, 14, 39, 0.5);
	border-radius: 4px;
}

.tech-table >>> .el-table__body-wrapper::-webkit-scrollbar-thumb {
	background: rgba(0, 240, 255, 0.3);
	border-radius: 4px;
	transition: background 0.3s;
}

.tech-table >>> .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 240, 255, 0.5);
}

/* ==================== 操作按钮 ==================== */
.action-button {
	color: #00f0ff !important;
	font-weight: 600 !important;
	padding: 4px 8px !important;
	transition: all 0.3s ease !important;
	position: relative;
	background: transparent !important;
	border-radius: 4px;
	font-size: 13px !important;
}

.action-button::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0;
	height: 0;
	background: rgba(0, 240, 255, 0.2);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width 0.4s ease, height 0.4s ease;
}

.action-button:hover {
	background: rgba(0, 240, 255, 0.1) !important;
}

/* ==================== 固定列样式 ==================== */
.tech-table >>> .el-table__fixed,
.tech-table >>> .el-table__fixed-right {
	background: rgba(10, 14, 39, 0.95) !important;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.tech-table >>> .el-table__fixed-right::before,
.tech-table >>> .el-table__fixed::before {
	background: transparent !important;
}

/* ==================== Dialog 样式 ==================== */
.tech-dialog >>> .el-dialog {
	background: rgba(26, 31, 58, 0.95) !important;
	border: 1px solid rgba(0, 240, 255, 0.3);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(10px);
}

.tech-dialog >>> .el-dialog__header {
	border-bottom: 1px solid rgba(0, 240, 255, 0.2);
	padding: 16px 20px;
}

.tech-dialog >>> .el-dialog__title {
	color: #00f0ff;
	font-weight: 600;
	text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.tech-dialog >>> .el-dialog__body {
	padding: 20px;
	color: #e0e6ed;
}

.tech-dialog >>> .el-dialog__footer {
	border-top: 1px solid rgba(0, 240, 255, 0.2);
	padding: 12px 20px;
}

.tech-dialog >>> .el-form-item__label {
	color: #b8c5d6 !important;
}

.tech-dialog >>> .el-input__inner,
.tech-dialog >>> .el-textarea__inner {
	background: rgba(10, 14, 39, 0.6) !important;
	border: 1px solid rgba(0, 240, 255, 0.3) !important;
	color: #e0e6ed !important;
	border-radius: 6px;
}

.tech-dialog >>> .el-input__inner:hover,
.tech-dialog >>> .el-textarea__inner:hover {
	border-color: rgba(0, 240, 255, 0.5) !important;
}

.tech-dialog >>> .el-input__inner:focus,
.tech-dialog >>> .el-textarea__inner:focus {
	border-color: #00f0ff !important;
	box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
	background: rgba(10, 14, 39, 0.8) !important;
}

.tech-dialog >>> .el-input.is-disabled .el-input__inner {
	background: rgba(10, 14, 39, 0.3) !important;
	color: #7f8ea3 !important;
}

.tech-dialog >>> .el-button {
	border-radius: 6px;
	font-weight: 600;
	transition: all 0.3s ease;
}

.tech-dialog >>> .el-button--default {
	background: rgba(10, 14, 39, 0.6) !important;
	border: 1px solid rgba(0, 240, 255, 0.3) !important;
	color: #b8c5d6 !important;
}

.tech-dialog >>> .el-button--default:hover {
	border-color: rgba(0, 240, 255, 0.5) !important;
	color: #00f0ff !important;
}

.tech-dialog >>> .el-button--primary {
	background: linear-gradient(135deg, #00f0ff 0%, #0099cc 100%) !important;
	border: none !important;
	color: #0a0e27 !important;
	box-shadow: 0 4px 15px rgba(0, 240, 255, 0.3);
}

.tech-dialog >>> .el-button--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 240, 255, 0.5);
}

.tech-dialog >>> .el-button--small {
	padding: 8px 16px;
	font-size: 13px;
}

/* ==================== 日期选择器 ==================== */
.tech-dialog >>> .el-date-editor.el-input {
	width: 100%;
}

.tech-dialog >>> .el-date-editor .el-input__inner {
	padding-left: 30px;
}

.tech-dialog >>> .el-date-editor .el-input__prefix {
	left: 5px;
	color: #7f8ea3;
}

/* ==================== Tag 样式 ==================== */
.tech-table >>> .el-tag {
	background: rgba(0, 240, 255, 0.1) !important;
	border: 1px solid rgba(0, 240, 255, 0.3) !important;
	color: #00f0ff !important;
	border-radius: 4px;
	font-weight: 600;
}

.tech-table >>> .el-tag--success {
	background: rgba(0, 255, 136, 0.1) !important;
	border-color: rgba(0, 255, 136, 0.3) !important;
	color: #00ff88 !important;
}

.tech-table >>> .el-tag--warning {
	background: rgba(255, 193, 7, 0.1) !important;
	border-color: rgba(255, 193, 7, 0.3) !important;
	color: #ffc107 !important;
}

.tech-table >>> .el-tag--danger {
	background: rgba(255, 71, 87, 0.1) !important;
	border-color: rgba(255, 71, 87, 0.3) !important;
	color: #ff4757 !important;
}

/* ==================== 响应式 ==================== */
@media (max-width: 768px) {
	.page-container {
		padding: 12px;
	}

	.tech-card {
		padding: 12px;
		margin-bottom: 12px;
	}

	.filter-content {
		flex-direction: column;
		align-items: flex-start;
	}
}
</style>
